﻿@page "/templates/run-project"
@page "/boilerplate/run-project"
@inherits AppComponentBase

<PageOutlet Url="templates/run-project"
            Title="Run project - Templates"
            Description="Run project of the project templates of the bit platform" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Project Run</BitText>
    <br />
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            The process for running the project varies based on the <b>Api</b> parameter set during project initiation:
            <br />
            <ul>
                <li>
                    <b>--api Integrated (default):</b> Simply run the Server.Web project (Running Server.Api is optional but not required).
                </li>
                <li>
                    <b>--api Standalone:</b> Run both the Server.Api and Server.Web projects.
                </li>
            </ul>
            <b>Note:</b> You have to make sure that the connection strings section of the Server.Api is properly configured based on the database of your choice installation. However, if you've created the project with Aspire (which is enabled by default) and you've installed Docker Desktop, you can simply run the AppHost project. This will run all dependencies as Docker containers and provide you with an awesome handy dashboard as well.
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Login Credentials</BitText>
            Upon project run, please use the following credentials to sign in:
            <ul>
                <li>
                    <b>Email:</b> test@bitplatform.dev
                </li>
                <li>
                    <b>Password:</b> 123456
                </li>
            </ul>
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Development Environment</BitText>
            The project is configured to use Blazor Server as the default mode to enhance the development experience,
            enabling features such as <a href="https://learn.microsoft.com/en-us/visualstudio/debugger/hot-reload?view=vs-2022" target="_blank">Visual Studio .NET Hot Reload</a>
            and <a href="https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-watch" target="_blank">dotnet watch</a>. To utilize the Hot Reload feature,
            ensure that you have the latest versions of Visual Studio, the .NET SDK, 
            and <a href="https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass" target="_blank">Live Sass Compiler</a>  for VS Code installed. 
            This setup allows for automatic application of changes made to .razor,
            .scss, or .cs files without the need to rebuild the project. If any changes to these files do not take effect without a rebuild, please feel free to create an issue 
            <a href="https://github.com/bitfoundation/bitplatform/issues/new/choose" target="_blank">here</a>.
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Blazor Mode Selection</BitText>
            To choose between Blazor modes, refer to the server project's appsettings.json file. By default, for development it
            is Blazor Server.
            <CodeBox>"WebAppRender": {
    "BlazorMode": "BlazorServer",
    "BlazorMode_Comment": "BlazorServer, BlazorWebAssembly and BlazorAuto."
}</CodeBox>
            <br />
            <BitText Typography="BitTypography.H5" Gutter>Running in Blazor WebAssembly Standalone Mode</BitText>
            To run the project in Blazor WebAssembly Standalone mode, run Client.Web in addition to server project.
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Visual Studio / Visual Studio Code Additional Launch Options</BitText>
            The project also supports additional launch profiles, including Docker, IIS Express, and WSL. These options provide flexibility
            for developers to test the project according to their specific requirements.
            <br />
            <br />
            Although the Docker option is available in Visual Studio, we recommend using it in Visual Studio Code. This is because, in Visual Studio,
            selecting Docker as the launch profile causes code changes to take a significant amount of time to apply. In contrast, Visual Studio Code
            offers a more efficient workflow.
            <br />
            <br />
            By clicking on <b>Open a Remote Window</b> and selecting <b>Reopen in Container</b> from the dropdown, you can run the project in Docker in the background.
            This approach allows Visual Studio Code to operate within Docker, along with all its extensions and SDKs, leading to a much faster development experience.
            <br />
            <br />
            If you're developing on Windows, it is recommended to run <b><i>bash ./Clean.sh</i></b> inside container the first time you open the project.
            <br />
            <div class="image-container">
                <img class="image" src="images/templates/vs-code-docker.webp" />
            </div>
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Connecting Client to Server</BitText>
            To connect the client to the server, set the <i>ServerAddress</i> inside Client.Core/appsettings.json to the appropriate IP address. The default value does not need
            to be changed for Web, Windows app, or Android Emulator.
            <br />
            <br />
            For iOS and Android devices, there are two solutions:
            <ol>
                <li>
                    <b>Same Network Connection:</b> Ensure that your Android/iOS device and PC are on the same network, and make sure the firewall does not interfere.
                    A sample configuration would look like this:
                    <code>"ServerAddress": "http://192.168.1.17:5030/"</code>
                </li>
                <li>
                    <b>Dev Tunnels:</b> Alternatively, you can use dev tunnels. Below is a sample value for dev tunnels:
                    <br />
                    <code>"ServerAddress": "https://r3c136gg-5030.euw.devtunnels.ms"</code>
                    <br />
                    For additional details about dev tunnels, please refer to the following video and <a href="https://code.visualstudio.com/docs/editor/port-forwarding" target="_blank">docs</a>.
                    <br />
                    <br />
                    <div class="video-container">
                        <iframe src="https://www.youtube.com/embed/72hs_IlE-GY"
                                width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                        </iframe>
                    </div>
                    <br />
                </li>
            </ol>
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Run Windows Apps</BitText>
            To run the project on the Windows platform, either set Client.Maui or Client.Windows as the startup project. If you need to access the Developer Tools, simply use
            <i>Ctrl + Shift + I</i> on the opened windows application.
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Android, iOS Browser Dev Tools</BitText>
            Opening Browser Dev Tools for Android and iOS can be somewhat complex. For more detailed instructions applicable to macOS, which also apply to Windows
            and Linux, please refer to the following video:
            <br />
            <br />
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/iIa0HhV1ZsY"
                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                </iframe>
            </div>
            <br />
            You can use the same techinque to inspect web apps running inside Android/iOS devices and simulators.
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Run MAUI in VS Code for iOS, Android and macOS</BitText>
            To run MAUI in VS Code for iOS, Android and macOS, assuming all the requirements are installed based on our documentation, see the following video:
            <br />
            <br />
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/rumfIg9qJ_Y?start=1700"
                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                </iframe>
            </div>
            <br />
            Next in order to run on an Android Device follow the instructions in this video:
            <br />
            <br />
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/ZkrUR3A9aM4"
                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                </iframe>
            </div>
            <br />
            And in order to run on an iOS device see this video:
            <br />
            <br />
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/B-kZ-AgEeO8"
                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                </iframe>
            </div>
            <br />
        </div>
    </section>
    <br />
    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Run MAUI in Visual Studio for iOS, Android</BitText>
            Running your project on Android, Windows, and Web using Visual Studio is straightforward. However, testing a macOS version with Visual Studio isn't possible.
            For iOS, if you have a Mac connected to the same network as your Windows PC, you can follow 
            <a href="https://learn.microsoft.com/en-us/dotnet/maui/ios/pair-to-mac?view=net-maui-9.0" target="_blank">this documentation</a> 
            to connect your Visual Studio to the mac device and run the iOS project using Visual Studio while coding on Windows.
            <br />
            <br />
            If you don't have a Mac but do have an Apple Developer Account and an iOS device,
            you can follow the guide below to test the iOS version on Windows and Visual Studio without needing a Mac.
            Set the MAUI project as the startup project.
            <br />
            <br />
            <div class="video-container">
                <iframe src="https://www.youtube.com/embed/snQ1C6Cppr8"
                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                </iframe>
            </div>
        </div>
    </section>
    <br />
    <br />
</div>
<NavigationButtons Prev="Create project" PrevUrl="/templates/create-project" Next="Wiki" NextUrl="/templates/wiki" />